{% extends 'home/index.html'%}

{% block title %}
<title>{{ data.title}}--详情</title>
{% endblock %}

{% block css %}
<link type="text/css" href="/static/home/css/optstyle.css" rel="stylesheet" />
<link type="text/css" href="/static/home/css/style.css" rel="stylesheet" />
{% endblock %}

{% block js %}
<script type="text/javascript" src="/static/home/AmazeUI-2.4.2/assets/js/amazeui.js"></script>
<script type="text/javascript" src="/static/home/js/jquery.imagezoom.min.js"></script>
<script type="text/javascript" src="/static/home/js/jquery.flexslider.js"></script>
<script type="text/javascript" src="/static/home/js/list.js"></script>
{% endblock%}

{% block con %}
<div class="listMain">
    <!--分类-->
    <div class="nav-table">
       <div class="long-title"><span class="all-goods">全部分类</span></div>
       <div class="nav-cont">
            <ul>
                <li class="index"><a href="{% url 'home_index' %}">首页</a></li>
                
            </ul>
           
        </div>
    </div>
    <ol class="am-breadcrumb am-breadcrumb-slash">
        <li><a href="{% url 'home_index' %}">首页</a></li>
        <li><a href="{% url 'home_list' %}?cid=5">分类</a></li>
        <li class="am-active">内容</li>
    </ol>
    <script type="text/javascript">
        $(function() {});
        $(window).load(function() {
            $('.flexslider').flexslider({
                animation: "slide",
                start: function(slider) {
                    $('body').removeClass('loading');
                }
            });
        });
    </script>
    <div class="scoll">
        <section class="slider">
            <div class="flexslider" style="">
                
            <div class="flex-viewport" style="overflow: hidden; position: relative;">
                <ul class="slides" style="width: 1000%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
                    <li class="clone" aria-hidden="true" style="width: 0px; float: left; display: block;">
                        <img src="/static/home/images/03.jpg" draggable="false">
                    </li>
                    <li style="width: 0px; float: left; display: block;" class="flex-active-slide">
                        <img src="{{ data.pic_url }}" title="pic" draggable="false">
                    </li>
                    <li style="width: 0px; float: left; display: block;">
                        <img src="/static/home/images/02.jpg" draggable="false">
                    </li>
                    <li style="width: 0px; float: left; display: block;">
                        <img src="/static/home/images/03.jpg" draggable="false">
                    </li>
                <li style="width: 0px; float: left; display: block;" class="clone" aria-hidden="true">
                        <img src="{{ data.pic_url }}" title="pic" draggable="false">
                    </li>
                </ul>
            </div>
            <ol class="flex-control-nav flex-control-paging">
                <li>
                    <a class="flex-active">1</a>
                </li>
                <li>
                    <a>2</a>
                </li>
                <li>
                    <a>3</a>
                </li>
            </ol>
            <ul class="flex-direction-nav">
                <li class="flex-nav-prev">
                    <a class="flex-prev" href="#">Previous</a>
                </li>
                <li class="flex-nav-next">
                    <a class="flex-next" href="#">Next</a>
                </li>
            </ul>
        </div>
        </section>
    </div>

    <!--放大镜-->

    <div class="item-inform">
        <div class="clearfixLeft" id="clearcontent">

            <div class="box">
                <script type="text/javascript">
                    $(document).ready(function() {
                        $(".jqzoom").imagezoom();
                        $("#thumblist li a").click(function() {
                            $(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
                            $(".jqzoom").attr('src', $(this).find("img").attr("mid"));
                            $(".jqzoom").attr('rel', $(this).find("img").attr("big"));
                        });
                    });
                </script>

                <div class="tb-booth tb-pic tb-s310">
                    <a href="{{ data.pic_url }}"><img src="{{ data.pic_url }}" alt="" rel="{{ data.pic_url }}" class="jqzoom" style="cursor: crosshair;"></a>
                </div>
                <ul class="tb-thumb" id="thumblist">
                    <li class="tb-selected">
                        <div class="tb-pic tb-s40">
                            <a href="#"><img src="{{ data.pic_url }}" mid="{{ data.pic_url }}" big="{{ data.pic_url }}"></a>
                        </div>
                    </li>
                  
                </ul>
            </div>
            <div class="clear"></div>
        </div>

        <div class="clearfixRight">
            <!--规格属性-->
            <!--名称-->
            <div class="tb-detail-hd">
                <h1>{{ data.title }}</h1>
            </div>
            <div class="tb-detail-list">
                <!--价格-->
                <div class="tb-detail-price">
                    <li class="price iteminfo_price">
                        <dt>促销价</dt>
                        <dd><em>¥</em><b class="sys_item_price">{{ data.price }}</b>  </dd>                                 
                    </li>
                    
                    <div class="clear"></div>
                </div>

                <!--销量-->
                <ul class="tm-ind-panel">
                    <li class="tm-ind-item tm-ind-sellCount canClick">
                        <div class="tm-indcon"><span class="tm-label">月销量</span><span class="tm-count">{{ data.ordernum }}</span></div>
                    </li>
                    
                </ul>
                <div class="clear"></div>

            
                <!--操作页面-->

                <div class="theme-popover-mask"></div>
                <div class="theme-popover">
                    <div class="theme-span"></div>
                    <div class="theme-poptit">
                        <a href="javascript:;" title="关闭" class="close">×</a>
                    </div>
                    <div class="theme-popbod dform">
                        <form class="theme-signin" name="loginform" action="" method="post">

                            <div class="theme-signin-left">                                     
                               
                                <div class="theme-options">
                                    <div class="cart-title number">数量</div>
                                    <dd>
                                        <input id="min" class="am-btn am-btn-default" name="" type="button" value="-" disabled="disabled">
                                        <input id="text_box" name="" type="text" value="1" style="width:30px;">
                                        <input id="add" class="am-btn am-btn-default" name="" type="button" value="+">
                                        <span id="Stock" class="tb-hidden">库存<span class="stock">{{ data.store }}</span>件</span>
                                    </dd>

                                </div>
                                <div class="clear"></div>

                                <div class="btn-op">
                                    <div class="btn am-btn am-btn-warning">确认</div>
                                    <div class="btn close am-btn am-btn-warning">取消</div>
                                </div>
                            </div>
                            <div class="theme-signin-right">
                                <div class="img-info">
                                    <img src="/static/home/images/songzi.jpg">
                                </div>
                                <div class="text-info">
                                    <span class="J_Price price-now">¥39.00</span>
                                    <span id="Stock" class="tb-hidden">库存<span class="stock">1000</span>件</span>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
        
                <div class="clear"></div>
               
            </div>

            <div class="pay">
                <div class="pay-opt">
                <a href="home.html"><span class="am-icon-home am-icon-fw">首页</span></a>
                <a><span class="am-icon-heart am-icon-fw">收藏</span></a>                
                </div>
                <li>
                    <div class="clearfix tb-btn tb-btn-basket theme-login">
                        <a id="LikBasket" gid="{{ data.id }}" title="加入购物车" href="javascript:void(0)">加入购物车</a>
                    </div>
                </li>
            </div>

            </div>

            <div class="clear"></div>

        </div>
        <!-- introduce-->

        <div class="introduce">
        <div class="browse">
        <div class="mc"> 
             <ul>                       
                <div class="mt">            
                    <h2>看了又看</h2>        
                </div>
                
                  <li class="first">
                    <div class="p-img">                    
                        <a href="#"> <img class="" src="/static/home/images/browse1.jpg"> </a>               
                    </div>
                    <div class="p-name">
                        <a href="#">【三只松鼠_开口松子】零食坚果特产炒货东北红松子原味</a>
                    </div>
                    <div class="p-price"><strong>￥35.90</strong></div>
                  </li>
             </ul>                  
        </div>
        </div>
        <div class="introduceMain">
        <div class="am-tabs" data-am-tabs="">
            <ul class="am-avg-sm-3 am-tabs-nav am-nav am-nav-tabs" otop="996.78125">
                <li class="am-active">
                    <a href="#"><span class="index-needs-dt-txt">宝贝详情</span></a>
                </li>
               
            </ul>
            <div class="am-tabs-bd" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">

            <div class="am-tab-panel am-fade am-in am-active">

                <div class="details">
                    <div class="attr-list-hd after-market-hd">
                        
                    </div>
                    <div class="twlistNews">
                        <img src="{{ data.pic_url }}">                            
                        <!-- <img src="{{ data.pic_url }}">                             -->
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            </div>
        </div>
        </div>
        </div>
    </div>
<script type="text/javascript">
    $('#LikBasket').click(function(){
        // 判断是否登录
        var vipUser = '{{ request.session.vipUser }}'
        if (!vipUser){
            //没登录
            alert("请先登录");
            return;
        }
        // 获取商品id和数量
        var gid = $(this).attr('gid')
        var num = $('#text_box').val()

        // 发送ajax请求
        $.get('{% url "home_cartadd" %}',{'gid':gid,'num':num},function(data){
            alert(data['msg'])
        },'json')

    })
</script>

{% endblock %}